<template>
  <view class="rewards">
    <div class="head">
      <img class="bg" src="https://cxj.szzkba.cn/up/uploadPath/icon/pPZRxIS.png" alt="">
      <div class="title">累计积分</div>
      <div class="point flex-a">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPZfx3Q.png" alt="">
        <text>30.3</text>
      </div>
    </div>
    <div class="list flex">
      <div class="left">
        <div>已兑换:</div>
        <div class="flex-a">
          <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPZfx3Q.png" alt="">
          <text>30.3</text>
        </div>
      </div>
      <div class="right">
        <div>待兑换:</div>
        <div class="flex-a">
          <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPZfx3Q.png" alt="">
          <text>10.3</text>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="head">
        <div class="btn">立即兑换</div>
      </div>
      <div class="title">体现明细:</div>
      <div class="tab flex">
        <div class="left">兑换时间</div>
        <div>兑换积分</div>
      </div>
      <div class="exchange">
        <div :class="show ? 'lists active' : 'lists'">
          <div class="item flex-a" v-for="item in 10" :key="item">
            <div class="time">2020-5-16 15:39:03</div>
            <div class="flex-a">
              <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPZfx3Q.png" alt="">
              <text>10.3</text>
            </div>
          </div>
        </div>
        <div class="more flex-a" @click="changeShow">
          <text>{{ !show ? '查看更多' : '收起' }}</text>
          <img :class="show ? 'active' : ''" src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV4Cp4.png" alt="">
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getActRechargeInfo } from '../../../api/index'
export default {
  components: {

  },
  setup() {
    const data = reactive({
      show: false,
      details: []
    });

    onMounted(() => {
      getActRechargeInfo().then(res => {
        if (res.resultCode == 200) {
          data.details = res.data
        }
      })
    });
    const changeShow = () => {
      data.show = !data.show
      //console.log(data.show)
    }
    return {
      ...toRefs(data), changeShow
    }
  }
}
</script>
<style lang="scss">
.rewards {
  background: #FAFAFF;
  position: relative;
  padding-bottom: 30rpx;

  .head {
    position: relative;

    img.bg {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .title {
      text-align: center;
      color: #fff;
      font-size: 32rpx;
      padding-top: 40rpx;
      position: relative;
      z-index: 1;
    }

    .point {
      text-align: center;
      color: #fff;
      font-size: 70rpx;
      justify-content: center;
      position: relative;
      z-index: 1;

      img {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
      }
    }
  }

  .list {
    background: #fff;
    border-radius: 20rpx;
    width: 96%;
    margin: 50rpx auto 0;
    padding: 20rpx 0;
    font-size: 32rpx;
    box-sizing: border-box;
    color: rgba($color: #565177, $alpha: 0.8);
    position: relative;
    z-index: 1;

    .left,
    .right {
      width: 50%;
      box-sizing: border-box;
      padding-left: 50rpx;

      img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      text {
        color: #565177;
        font-size: 55rpx;
      }
    }

    .left {
      border-right: 1rpx solid #EADFDB;
    }
  }

  .detail {
    background: #fff;
    border-radius: 20rpx;
    width: 96%;
    height: 1200rpx;
    margin: 20rpx auto 0;
    position: relative;
    z-index: 1;

    .head {
      border-bottom: 1rpx solid #ECE3E0;
      padding: 40rpx 0;

      .btn {
        width: 92%;
        margin: 0 auto;
        border-radius: 50rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        color: #fff;
        font-size: 36rpx;
        background: linear-gradient(to right, #B5B5FF, #C1B9FF, #D2BDFF);
      }
    }

    .title {
      width: 92%;
      margin: 30rpx auto;
      color: rgba($color: #565177, $alpha: 0.8);
      font-size: 32rpx;
    }

    .tab {
      background: rgba($color: #979797, $alpha: 0.1);
      border-radius: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: rgba($color: #565177, $alpha: 0.8);
      width: 92%;
      margin: 0 auto;
      padding-left: 50rpx;
      box-sizing: border-box;
      font-size: 30rpx;

      .left {
        width: 70%;
      }
    }

    .exchange {
      padding-left: 50rpx;
      box-sizing: border-box;
      width: 92%;
      margin: 30rpx auto;
      font-size: 32rpx;
      color: #9D9DB9;

      .lists {
        height: 280rpx;
        overflow: hidden;
        transition: all 0.5s;

        .item {
          margin-bottom: 15rpx;

          .time {
            width: 70%;
          }

          img {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
        }
      }

      .lists.active {
        height: 560rpx;
      }

      .more {
        background: #F2F2FD;
        color: #565177;
        width: 240rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
        border-radius: 70rpx;
        font-size: 28rpx;
        justify-content: space-evenly;
        box-sizing: border-box;
        padding: 0 20rpx;
        margin: 20rpx auto;

        img {
          width: 30rpx;
          height: 15rpx;
          transition: all 0.5s;
        }

        img.active {
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
